<template>
  <div id="box121">
    <div class="minbox">
      <h1 id="randomFood">{{ currentFood }}</h1>

      <button id="startButton" @click="toggleSelection">
        {{ counter == 0 ? "开始选择！" : buttonText }}
      </button>
      <p id="counterMessage">这么挑？饿着吧！</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRunning: false,
      intervalId: null,
      counter: 0,
      currentFood: "今天吃啥啊？",
      foods: [
        "馄饨",
        "拉面",
        "烩面",
        "热干面",
        "刀削面",
        "油泼面",
        "炸酱面",
        "炒面",
        "重庆小面",
        "米线",
        "酸辣粉",
        "土豆粉",
        "螺狮粉",
        "凉皮儿",
        "麻辣烫肉夹馍",
        "羊肉汤",
        "炒饭",
        "盖浇饭",
        "卤肉饭",
        "烤肉饭",
        "黄焖鸡米饭",
        "驴肉火烧",
        "川菜",
        "麻辣香锅",
        "火锅",
        "酸菜鱼",
        "烤串",
        "披萨",
        "烤鸭",
        "汉堡",
        "炸鸡",
        "寿司",
        "蟹黄包",
        "粽子",
        "煎饼果子",
        "生煎",
        "炒年糕",
        "盖浇饭",
        "砂锅",
        "大排档",
        "米线",
        "满汉全席",
        "西餐",
        "麻辣烫",
        "自助餐",
        "炒面",
        "快餐",
        "水果",
        "西北风",
        "馄饨",
        "火锅",
        "烧烤",
        "泡面",
        "速冻水饺",
        "日本料理",
        "涮羊肉",
        "味千拉面",
        "肯德基",
        "面包",
        "扬州炒饭",
        "自助餐",
        "茶餐厅",
        "海底捞",
        "咖啡",
        "比萨",
        "麦当劳",
        "兰州拉面",
        "沙县小吃",
        "烤鱼",
        "海鲜",
        "铁板烧",
        "韩国料理",
        "粥",
        "快餐",
        "东南亚菜",
        "甜点",
        "农家菜",
        "川菜",
        "粤菜",
        "湘菜",
        "本帮菜",
        "竹笋烤肉",
      ],
      showCounterMessage: false,
    };
  },
  computed: {
    buttonText() {
      return this.isRunning ? "停，就这个！" : "不行，换一个！";
    },
  },
  methods: {
    toggleSelection() {
      this.counter++;

      if (this.counter > 30) {
        this.showCounterMessage = true;
        return;
      }

      this.isRunning = !this.isRunning;

      if (this.isRunning) {
        this.startSelection();
      } else {
        this.stopSelection();
      }
    },
    startSelection() {
      this.intervalId = setInterval(() => {
        this.currentFood = this.getRandomFood();
        this.createFloatingText();
      }, 50);
    },
    stopSelection() {
      console.log(this.currentFood);

      clearInterval(this.intervalId);
    },
    getRandomFood() {
      return this.foods[Math.floor(Math.random() * this.foods.length)];
    },
    createFloatingText() {
      const text = document.createElement("div");
      const box = document.querySelector("#box121");
      text.className = "floating-text";
      text.textContent = this.currentFood;
      text.style.left = `${Math.random() * 95}%`;
      text.style.top = `${
        Math.random() * (window.innerHeight - text.clientHeight)
      }px`;
      text.style.color = this.getRandomColor();
      text.style.fontSize = `${Math.floor(Math.random() * 24 + 12)}px`;
      box.appendChild(text);
      setTimeout(() => text.remove(), 3000);
    },
    getRandomColor() {
      return `hsl(${Math.random() * 360}, 70%, 50%)`;
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.intervalId);
  },
};
</script>
<style lang="less">
:root {
  --primary-color: #ff4757;
  --secondary-color: #2ed573;
}
#box121 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.minbox {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
}
h1 {
  color: var(--primary-color);
  margin: 20px 0;
  font-size: 2.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

#foodList {
  width: 100%;
  height: 120px;
  padding: 15px;
  margin: 20px 0;
  border: 2px solid #ced6e0;
  border-radius: 10px;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.3s;
}

#foodList:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 8px rgba(255, 71, 87, 0.2);
}

button {
  padding: 12px 30px;
  font-size: 1.2em;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 10px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
}

button:active {
  transform: translateY(1px);
}

.floating-text {
  position: absolute;
  pointer-events: none;
  animation: float 3s ease-out forwards;
  z-index: 9999;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
  }
}

#counterMessage {
  color: #ff4757;
  font-size: 1.5em;
  font-weight: bold;
  display: none;
  margin-top: 20px;
}

.pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
